<template>
	<div class="goods-item">
		<div class="img-box">
			<img v-lazy="item.pic" alt="" />
			<!-- <div class="account">
				<i class="iconfoshent icon-huo"></i>
				还剩{{ item.receiveStatus === 2 ? 0 : item.surplusNum }}件
			</div> -->
			<div class="mask" v-if="item.surplusNum === 0 || item.receiveStatus === 2">
				<div class="circular-wrap">
					<div class="circular-inner">已抢完</div>
				</div>
			</div>
		</div>
		<div class="goods-content">
			<p class="goods-name">{{ item.title }}</p>
			<div class="coupon">领{{ item.couponMoney }}元券+首单补贴{{ item.mdMoney | Fixed(2) }}元</div>
			<div class="info">
				<div class="price">
					<p class="deal">
						新人价<span class="symbol">¥</span><span> {{ (parseFloat(item.endPrice) - parseFloat(item.mdMoney)) | Fixed(2) }}</span>
					</p>
					<p class="original">¥{{ item.price | Fixed(2) }}</p>
				</div>
				<div
					class="buy"
					@click.stop="buyProduct"
					:class="[{ disabled: (item.surplusNum === 0 || newPerson === 0 || item.receiveStatus === 2) && item.hasBuy === 0 }]"
				>
					<div class="copy-tkl">
						<svg-icon
							v-if="(newPerson === 0 || item.surplusNum === 0 || item.receiveStatus === 2) && item.hasBuy === 0"
							class="icon"
							iconName="shandiangrey"
						></svg-icon>
						<svg-icon v-else class="icon" iconName="shandian"></svg-icon>
						<span>
							{{ item.hasBuy === 1 ? '复制淘口令' : '立即抢' }}
						</span>
					</div>
					<div class="surplus-num">
						<span>剩{{ item.receiveStatus === 2 ? 0 : item.surplusNum }}件</span>
					</div>
				</div>
			</div>
		</div>

		<!--复制成功-->
		<van-popup class="copy-popup" get-container="body" v-model="visible" closeable @close="close">
			<div class="main">
				<svg-icon class="icon" iconName="copy-ok"></svg-icon>
				<p class="title">
					淘口令复制成功<br />
					打开【淘宝】购买吧
				</p>
				<p class="time">
					优惠券到期时间<br />
					<van-count-down :time="couponEndtime" format="DD 天 HH 时 mm 分 ss 秒" />
				</p>
			</div>
		</van-popup>

		<van-popup class="comfirm-popup" get-container="body" v-model="visibleComfirm" closeable @close="closeComfirm">
			<div class="main">
				<h2>确认选购本商品？</h2>
				<p class="text"><span>1、</span>免单机会仅有<span>一次</span>，确认后不可更改！</p>
				<p class="text">
					<span>2、</span>下单实付<span>{{ item.mdMoney | Fixed(2) }}</span
					>元，确认收货后返<span>{{ item.mdMoney | Fixed(2) }}</span
					>元
				</p>
				<p class="text"><span>3、不要使用</span>淘红包、集分宝、淘金币 等任何抵扣手段</p>
				<div class="footer">
					<a @click="visibleComfirm = false">考虑一下</a>
					<a class="submit" @click="submit">确认使用</a>
				</div>
			</div>
		</van-popup>
		<authorize-dig ref="authorizeDig"></authorize-dig>
	</div>
</template>

<script>
import moment from 'moment';
import { Dialog, Popup, CountDown } from 'vant';
import { AuthorizeDig } from '@/components';
import { mapGetters } from 'vuex';
export default {
	name: 'ZeroItem',
	components: {
		'van-popup': Popup,
		'van-count-down': CountDown,
		AuthorizeDig
	},
	props: {
		item: {
			type: Object
		},
		newPerson: {
			type: Number
		}
	},
	data() {
		return {
			isShowDialog: false,
			visible: false,
			visibleComfirm: false,
			tkl: null,
			couponEndtime: 0
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	created() {
		this.couponEndtime = (parseInt(this.item.couponEndtime) - parseInt(moment().format('X'))) * 1000;
	},
	methods: {
		buyProduct() {
			if ((this.item.surplusNum === 0 || this.newPerson === 0 || this.item.receiveStatus === 2) && this.item.hasBuy === 0) {
				return false;
			}
			// 已创建淘口令
			if (this.item.hasBuy === 1) {
				window.BestpayHtml5.System.setClipboardContent(
					{
						data: this.item.tkl
					},
					() => {
						this.visible = true;
						setTimeout(() => {
							this.visible = false;

							this.close();
						}, 2000);
					}
				);
			} else {
				if (this.userInfo.tbStatus === 1) {
					// 优惠券过期校验
					let nowTime = moment(Date.now()).format('YYYY-MM-DD HH:mm:ss');
					let leave = parseInt(this.item.couponEndtime) * 1000 - new Date(nowTime).getTime();
					let min = Math.floor(leave / (60 * 1000));

					if (min > 0 && min <= 120) {
						Dialog.confirm({
							title: '温馨提示',
							message: '亲，你选择的免单商品将在' + min + '分钟后过期，是否确定领用该商品',
							confirmButtonText: '确认使用',
							cancelButtonText: '考虑一下',
							closeOnPopstate: true
						}).then(() => {
							this.visibleComfirm = true;
						});
					} else if (min <= 0) {
						this.$toast('优惠券已过期');
					} else {
						this.visibleComfirm = true;
					}
				} else {
					if (this.userInfo.tbStatus === 2) {
						this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
					}
					if (this.userInfo.tbStatus === 3) {
						this.$toast('授权过期，请重新授权');
					}
					this.$refs.authorizeDig.open('/index');
				}
			}
		},

		submit() {
			let params = {
				title: this.item.title,
				itemId: this.item.gid,
				mdId: this.item.mdId,
				isFee: 1
			};
			this.$service.shopping.taobao
				.privilege(params)
				.then(res => {
					if (res.tkl) {
						this.tkl = res.tkl;
					} else {
						this.tkl = res.coupon_click_url;
					}

					window.BestpayHtml5.System.setClipboardContent(
						{
							data: this.tkl
						},
						() => {
							this.visibleComfirm = false;
							this.visible = true;
							setTimeout(() => {
								this.visible = false;

								this.close();
							}, 2000);
						}
					);
				})
				.catch(error => {
					this.$toast(error.message);
				});
		},
		close() {
			// 更新用户信息
			this.$store.dispatch('GET_USERINFO');
			// 触发列表刷新
			this.$emit('refresh');
		},
		closeComfirm() {
			this.visibleComfirm = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	display: flex;
	.img-box {
		width: 240px;
		height: 240px;
		margin-right: 14px;
		position: relative;
		border-radius: 20px;
		overflow: hidden;
		img {
			max-width: 100%;
			max-height: 100%;
		}
		.account {
			position: absolute;
			top: 0;
			left: 0;
			padding: 0 16px;
			height: 34px;
			text-align: center;
			font-size: 20px;
			color: $color-white;
			background: linear-gradient(225deg, #ff2737, #ff6263);
			border-radius: 0 0 16px 0;
			i {
				font-size: 24px;
			}
		}
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
			@include flexBox(center, center);
			.circular-wrap {
				width: 110px;
				height: 110px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				transform: rotate(-24deg);
				@include flexBox(center, center);
				.circular-inner {
					width: 90px;
					height: 86px;
					border: 2px solid $color-white;
					border-radius: 50%;
					font-size: 18px;
					color: $color-white;
					@include flexBox(center, center);
				}
			}
		}
	}
	.goods-content {
		height: 240px;
		flex: 1;
		@include flexBox(space-between, null, column);
		.goods-name {
			text-align: left;
			color: $text-black;
			font-size: 28px;
			@include ellipsis(2);
		}
		.coupon {
			width: fit-content;
			background: #ffe6e6;
			line-height: 54px;
			padding: 0 20px;
			border-radius: 50px;
			color: #f70114;
			font-size: 24px;
			margin-top: 4px;
			margin-bottom: 20px;
			transition: 0.3s;
		}
		.info {
			@include flexBox(space-between, center);
			.num {
				color: $main-color;
				font-size: 28px;
				i {
					color: #f42e39;
					margin-right: 6px;
				}
			}
			.price {
				text-align: right;
				display: flex;
				align-items: center;
				position: relative;
				bottom: -10px;
				.deal {
					font-size: 22px;
					color: $main-color;
					margin-right: 10px;
					display: flex;
					align-items: flex-end;
					.symbol {
						font-size: 24px;
					}
					span {
						font-weight: 600;
						font-size: 30px;
					}
				}
				.original {
					color: #b5b5b5;
					font-size: 24px;
					text-decoration: line-through;
				}
			}
			.buy {
				height: 68px;
				color: $color-white;
				font-size: 20px;
				border-radius: 16px;
				// @include flexBox(center, center, column);
				border: 2px solid rgba(255, 78, 73, 1);
				min-width: 136px;
				max-width: 145px;
				overflow: hidden;
				i {
					font-size: 20px;
				}
				.copy-tkl {
					width: 100%;
					height: 34px;
					line-height: 34px;
					background: linear-gradient(270deg, rgba(255, 72, 74, 1) 0%, rgba(255, 80, 73, 1) 100%);
					font-size: 20px;
					text-align: center;
					display: block;
					color: #fff;
					.icon {
						font-size: 22px;
						position: relative;
						top: -1px;
						color: #fff;
					}
					span {
						letter-spacing: 0.5px;
						position: relative;
						left: -5px;
						top: -1px;
					}
				}
				.surplus-num {
					font-size: 20px;
					width: 100%;
					height: 34px;
					line-height: 34px;
					border-bottom-left-radius: 16px;
					border-bottom-right-radius: 16px;
					background-color: #fff;
					color: #ff4e49;
					span {
						width: 100%;
						transform: scale(0.9, 0.9);
						text-align: center;
						display: block;
					}
				}
				&.disabled {
					border-color: #ebebeb;
					.copy-tkl {
						background: #ebebeb;
						color: #7b7b7b;
					}
					.surplus-num {
						color: #7b7b7b;
					}
				}
			}
		}
	}
}
.confirm-popup {
	width: 546px;
	height: 346px;
	border-radius: 12px;
	@include flexBox(space-between, center, column);
	h2 {
		font-size: 32px;
		color: #000;
		margin-top: 48px;
	}
	p {
		font-size: 28px;
		color: #5b5b5b;
		padding: 0 50px;
		margin-top: -20px;
	}
	.footer {
		border-top: 1px solid #f7f7f7;
		height: 102px;
		display: flex;
		width: 100%;
		a {
			width: 50%;
			line-height: 102px;
			text-align: center;
			font-size: 32px;
			display: block;
			&.cancel {
				color: #a3a3a3;
			}
			&.submit {
				color: $main-color;
				border-left: 1px solid #f7f7f7;
			}
		}
	}
}
.copy-popup {
	width: 452px;
	height: 428px;
	border-radius: 16px;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: #2e2d2d;
			text-align: center;
			margin: 30px 0;
		}
		.time,
		.van-count-down {
			font-size: 24px;
			color: #7e7e7e;
			text-align: center;
			line-height: 40px;
		}
	}
}
.comfirm-popup {
	width: 580px;
	border-radius: 16px;
	.main {
		h2 {
			text-align: center;
			font-size: 32px;
			font-weight: 600;
			margin: 30px 0;
			color: #000;
		}
		span {
			color: $color-red;
		}
		.text {
			font-size: 28px;
			color: #5b5b5b;
			padding: 0 40px;
		}
		.tips {
			padding: 0 40px;
			margin-top: 20px;
			text-align: left;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.footer {
			margin-top: 30px;
			border-top: 2px solid #f7f7f7;
			display: flex;
			a {
				width: 50%;
				line-height: 102px;
				font-size: 32px;
				color: #a3a3a3;
				display: block;
				text-align: center;
			}
			.submit {
				color: $main-color;
				border-left: 2px solid #f7f7f7;
			}
		}
	}
}
</style>
